import React from 'react';
import { forwardRef } from 'react';
import './index.scss';
export interface MonitorCamera {
  id: string;
  name: string;
  isActive?: boolean;
  hasSignal?: boolean;
  onClick?: () => void;
}

export interface SceneMonitorProps {
  width?: string | number;
  height?: string | number;
  cameras?: MonitorCamera[];
  mainBackgroundImage?: string;
  cameraButtonBackground?: string;
  cameraButtonBorder?: string;
  cameraTextColor?: string;
  signalIndicatorColor?: string;
  signalGlowColor?: string;
  showSignalIndicator?: boolean;
  buttonSpacing?: number;
  onCameraClick?: (camera: MonitorCamera, index: number) => void;
  onMainAreaClick?: () => void;
  theme?: 'light' | 'dark';
  style?: React.CSSProperties;
  className?: string;
  onClick?: () => void;
  __designMode?: string;
  componentId?: string;
  _componentName?: string;
  forwardRef?: any;
}

const SceneMonitor = forwardRef<HTMLDivElement, SceneMonitorProps>((props, ref) => {
  const {
    width = 408,
    height = 272,
    cameras = [
      { id: '1', name: '监控1', isActive: true, hasSignal: true },
      { id: '2', name: '监控2', isActive: false, hasSignal: true },
      { id: '3', name: '监控3', isActive: false, hasSignal: false },
      { id: '4', name: '监控4', isActive: false, hasSignal: true }
    ],
    mainBackgroundImage = 'http://localhost:8085/static/images/changjingjiankong/bz44.png',
    cameraButtonBackground = 'rgba(36,48,62,0.57)',
    cameraButtonBorder = '#266FA6',
    cameraTextColor = 'rgba(255,255,255,0.9)',
    signalIndicatorColor = '#FFFFFF',
    signalGlowColor = '#0085FF',
    showSignalIndicator = true,
    buttonSpacing = 12,
    onCameraClick,
    onMainAreaClick,
    theme = 'dark',
    style = {},
    className = '',
    onClick,
    __designMode,
    componentId,
    _componentName,
    forwardRef: forwardRefProp,
    ...otherProps
  } = props;

  const componentStyle: React.CSSProperties = {
    width: typeof width === 'number' ? `${width}px` : width,
    height: typeof height === 'number' ? `${height}px` : height,
    ...style
  };

  const handleCameraClick = (camera: MonitorCamera, index: number) => {
    if (onCameraClick) {
      onCameraClick(camera, index);
    }
  };
  const handleChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
    const cameraId = event.target.value;
    const selectedCamera = cameras.find(camera => camera.id === cameraId);
    if (selectedCamera) {
      handleCameraClick(selectedCamera, cameras.indexOf(selectedCamera));
    }
  };
  const handleMainAreaClick = () => {
    if (onMainAreaClick) {
      onMainAreaClick();
    }
  };

  const sceneMonitorClassName = ['scene-monitor', theme, className].filter(Boolean).join(' ');

  return (
    <div
      ref={ref}
      className={sceneMonitorClassName}
      style={componentStyle}
      onClick={onClick}
      data-component-id={componentId}
      data-component-name={_componentName}
      data-design-mode={__designMode}
      {...otherProps}
    >
      <select className="select-wrap">
        {cameras.map((c, index) => (
          <option key={c.id} value={c.id}>{c.name}</option>
        ))}
      </select>
      {/* 主监控区域 */}
      <div
        className="video-wrap"
        style={{
          backgroundImage: mainBackgroundImage ? `url(${mainBackgroundImage})` : undefined
        }}
        onClick={handleMainAreaClick}
      >
        {/* 监控内容占位 */}
        <video className="video-content" controls autoplay>
          <source src="https://www.runoob.com/try/demo_source/movie.mp4" type="video/mp4" />
        </video>
        <div className="video-str">视频上的叠加内容</div>
        {/* 监控信息叠加层 */}
      </div>
    </div>
  );
});

SceneMonitor.displayName = 'SceneMonitor';

export default SceneMonitor;
